<template>
  <div class="detail_content" v-if="petdetailsList">
    <!--地址时间-->
    <div class="detail_content_time">
      <span>地点: {{ petdetailsList.pet_giveaddress }}</span>
      <span>发布时间: {{ petdetailsList.pet_createtime.split("T")[0] }}</span>
    </div>
    <!--宠物信息-->
    <div class="detail_content_info_box">
      <h2>宠物信息</h2>
      <!--私聊-->
      <div
        class="detail_private"
        @click="handlePrivate(petdetailsList.user_id, petdetailsList.user_name)"
      >
        <span>私聊:</span>
        <svg class="icon_private" aria-hidden="true">
          <use xlink:href="#icon-siliao"></use>
        </svg>
      </div>
      <div class="detail_content_info">
        <div class="info_item">
          <svg class="icon_info" aria-hidden="true">
            <use xlink:href="#icon-nickname"></use>
          </svg>
          <span>{{ petdetailsList.pet_name || "无名" }}</span>
        </div>
        <div class="info_item">
          <svg class="icon_info" aria-hidden="true">
            <use xlink:href="#icon-nannv"></use>
          </svg>
          <span>{{ petdetailsList.pet_gender == "1" ? "雄姓" : "雌性" }}</span>
        </div>
        <div class="info_item">
          <svg class="icon_info" aria-hidden="true">
            <use xlink:href="#icon-nianling"></use>
          </svg>
          <span>{{ petdetailsList.pet_age }}</span>
        </div>
        <div class="info_item">
          <svg class="icon_info" aria-hidden="true">
            <use xlink:href="#icon-maofa"></use>
          </svg>
          <span>{{ petdetailsList.pet_hair || "未知" }}</span>
        </div>
        <div class="info_item">
          <svg class="icon_info" aria-hidden="true">
            <use xlink:href="#icon-tizhong"></use>
          </svg>
          <span>{{ petdetailsList.pet_weight || "未知" }}</span>
        </div>
        <div class="info_item">
          <svg class="icon_info" aria-hidden="true">
            <use xlink:href="#icon-quchong-xiao"></use>
          </svg>
          <span>{{
            petdetailsList.pet_Insect_repellent == "true" ? "已驱虫" : "未驱虫"
          }}</span>
        </div>
        <div class="info_item">
          <svg class="icon_info" aria-hidden="true">
            <use xlink:href="#icon-jueyu1"></use>
          </svg>
          <span>{{
            petdetailsList.pet_sterilization == "true" ? "已绝育" : "未绝育"
          }}</span>
        </div>
        <div class="info_item">
          <svg class="icon_info" aria-hidden="true">
            <use xlink:href="#icon-quchong"></use>
          </svg>
          <span>{{
            petdetailsList.pet_vaccin == "true" ? "已疫苗" : "未疫苗"
          }}</span>
        </div>
      </div>
    </div>
    <!--发宠原因-->
    <div class="detail_content_cause">
      <h2>宠物品种</h2>
      <p>
        {{ petdetailsList.pet_variety || "未知" }}
      </p>
    </div>
    <!--底部提示-->
    <div class="detail_content_hint">
      <h2>提醒</h2>
      <p>本次送养宠物平台无任何费用索要条件！</p>
    </div>
    <!--返回首页-->
    <ToHome />
  </div>
</template>

<script>
import ToHome from "@/components/ToHome";
import { useRouter } from "vue-router";
export default {
  name: "PetDetailContent",
  components: { ToHome },
  props: ["petdetailsList"],
  setup() {
    const router = useRouter();
    //跳转至聊天页面
    const handlePrivate = (id, name) => {
      router.push(`/talk/${id}/${name}`);
    };
    return { handlePrivate };
  },
};
</script>

<style scoped lang="less">
.detail_content_time {
  display: flex;
  justify-content: space-between;
  background: #fff;
  flex-wrap: wrap;
  span {
    font-size: 0.9rem;
    color: #5e5e5e;
  }
}
.detail_content_info_box {
  position: relative;
  margin: 0.3rem 0;
  padding: 0.5rem;
  background-color: #fff;
  .detail_private {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    display: flex;
    align-items: center;
    span {
      font-size: 0.9rem;
      color: #969799;
      margin-right: 0.2rem;
    }
  }
  h2 {
    font-size: 1.05rem;
    font-weight: normal;
    color: #ff9937;
    border-left: 2px solid;
    padding-left: 0.5rem;
    margin: 0;
  }
  .detail_content_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background: #fff;
    border-radius: 0.4rem;
    padding: 0.2rem;
    margin: 0.5rem 0.7rem 0.2rem;
    box-shadow: 0px 1px 3px 0px #ff976a;
    //border: 1px solid red;
    .info_item {
      width: 33.5%;
      text-align: center;
      margin: 0.3rem 0;
      display: flex;
      justify-content: stretch;
      align-items: center;
      span {
        font-size: 0.9rem;
        color: #323233;
      }
    }
  }
}

.detail_content_cause,
.detail_content_hint {
  margin: 0.3rem 0;
  padding: 0.5rem;
  background-color: #fff;
  h2 {
    font-size: 1.05rem;
    font-weight: normal;
    color: #ff9937;
    border-left: 2px solid;
    padding-left: 0.5rem;
    margin: 0;
  }
  p {
    font-size: 0.95rem;
    color: #7c6c6c;
    text-indent: 2em;
    margin: 0.2rem 0;
  }
}
.icon_info,
.icon_private {
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin-right: 0.7rem;
}
.icon_private {
  margin-right: 0;
  width: 1.6em;
  height: 1.6em;
}
</style>
